<template>
	<view class="myAddress">
		<view class="empty" v-if="list.length <= 0">
			<image src="../../../static/img/addressEmpty.png" mode=""></image>
			<view class="word">暂未设置</view>
		<!-- 	<view class="word1">没有收货地址寄不了快递哦~</view>
			<view class="btn" @tap.stop="goAddNew">新增地址</view> -->
		</view>
		
		<view v-else>
			<view class="list scale-1px-bottom" v-for="(v,i) in site" :key = "i" @tap.stop="changeIndex(v.id,index)">
				<view class="addrBox">
					<text class="addr">{{v.fullname}}</text>
				</view>
				<view class="detailAddr">{{v.address}}</view>
				<view class="disFlex crteBox">
					<view>
						<text class="name">{{v.name}}</text>
						<text class="phone">{{v.phone}}</text>
					</view>
					<!-- <view>
						<text class="update" @tap.stop="goUpdate(val)">编辑</text>
						<text class="delete" @tap.stop="showDeletePop(val,index)">删除</text>
					</view> -->
				</view>
			</view>
		</view>
		<!-- <view class="bottom"  v-if="list.length > 0">
			<button @tap.stop="goAddNew">新增地址</button>
		</view>
		<view class="canselBox" v-if="deletePop">
			<view class="cBox">
				<view class="title">确定要删除该地址吗？</view>
				<view class="crt">
					<view @tap="closeDeletePop()">取消</view>
					<view @tap="deleteOne()">确认</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				list:[{moren:1,pro_name:'重庆',city_name:'重庆市',area_name:'渝中区',address:'xxx',contacts:'司法所科技开发',phone:135852521}],
				deletePop:false,
				dzId:'',
				site:[],
				id:'',
			}
		},
		onLoad(option) {
			this.id=option.id
		},
		onShow () {
			// this.query();
			this.getsite()
			// this.citydata = uni.getStorageSync('citydata')
			// 
			// console.log(this.citydata)
		},
		methods: {
			query () {
				this.http('/api/address/index','post',{}).then( res => {
					if (res.status == 200) {
						this.list = res.data;
					}
				})
			},
			getsite(){
				this.http('/api/address/site', 'post', {}, )
					.then((res) => {
						this.site=res.data
						this.cityname()
					})
			},
			cityname(){
				this.site.map((i)=>{
					this.http('/api/city/find_city', 'post', {parent_id:i.city_id}, )
						.then((res) => {
						console.log(res)
						})
				})
				
			},
			deleteOne () {
				// let data = {
				// 	dz_id:this.dzId
				// };
				// this.http('apicloud/Address/del','post',data).then( res => {
				// 	if (res.status == 200) {
				// 		this.query();
				// 		this.deletePop = false;
				// 	}else {
				// 		uni.showToast({
				// 			icon:'none',
				// 			title:res.mess
				// 		})
				// 	}
				// })
			},
			goUpdate () {
				this.getnav(this.router(`updateAddress`));
				// this.getnav(this.router(`updateAddress?dz_id=${val.id}`));
			},
			goAddNew () {
				this.getnav(this.router(`addNewAddress`));
			},
			showDeletePop (val,index) {
				// this.dzId = val.id;
				this.deletePop = true;
			},
			closeDeletePop () {
				this.deletePop = false;
			},
			changeIndex (id,index) {
				// let data = {
				// 	dz_id:val.id
				// };
				// this.http('apicloud/Address/setmoren','post',data).then( res => {
				// 	if (res.status == 200) {
				// 		this.query();
				// 	}else {
				// 		uni.showToast({
				// 			icon:'none',
				// 			title:res.mess
				// 		})
				// 	}
				// })
				// this.getnav(this.router(`confirmRentOrder?cityid=${id}&id=${this.id}`));
				var pages = getCurrentPages();
				var currPage = pages[pages.length - 1]; // 当前页面
				var prevPage = pages[pages.length - 2]; // 上一级页面
				prevPage.$vm.otherFun(id);
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="less">
	.myAddress{
		padding: 0 32rpx;
		padding-bottom: 100rpx;
		.empty{
			padding-top: 220rpx;
			text-align: center;
			image{
				width: 240rpx;
				height: 230rpx;
			}
			.word{
				margin-top: 50rpx;
				font-size: 32rpx;
				font-weight:bold;
				text-align: center;
			}
			.word1{
				text-align: center;
				color: #AAA;
				padding-top: 20rpx;
			}
			.btn{
				width:240rpx;
				height:66rpx;
				background:#2291FF;
				opacity:1;
				border-radius:33px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				margin: 0 auto;
				margin-top: 20rpx;

			}
		}
		.list{
			padding: 40rpx 0;
			.addrBox{
				.default{
					width:60rpx;
					height:30rpx;
					background:#2291FF;
					border-radius:15px;
					color: #fff;
					font-size: 20rpx;
					padding: 0 2px;
					margin-right: 14rpx;
				}
				.addr{
					
					font-size:24rpx;
					color:rgba(102,102,102,1);
				}
			}
			.detailAddr{
				font-weight:bold;
				color:rgba(0,0,0,1);
				padding-top: 20rpx;
			}
			.crteBox{
				margin-top: 20rpx;
				.name{
					font-size: 22rpx;
				}
				.phone{
					padding-left: 22rpx;
					font-size: 22rpx;
				}
				.update{
					color: #2291FF;
					font-size: 22rpx;
				}
				.delete{
					color: #999;
					font-size: 22rpx;
					padding-left: 30rpx;
				}
			}
		}
		
		.bottom{
			position: fixed;
			width: 100%;
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 99;
			bottom: 0;
			left: 0;
			background-color: #fff;
			box-shadow:0px -3px 6px rgba(104,148,185,0.2);
			padding: 0 32rpx;
			button{
				background-color: #2291FF !important;
				font-size:36rpx;
				color: #fff;
				width:100%;
				height:88rpx;
				line-height: 88rpx;
				border-radius:5px;
			}
		}
		.canselBox{
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 999;
			.cBox{
				height:300rpx;
				background:rgba(255,255,255,1);
				box-shadow:0px 0px 10px rgba(0,0,0,0.16);
				border-radius:10px;
				position: absolute;
				left: 40rpx;
				width: calc(100% - 80rpx);
				z-index: 9999;
				top: 50%;
				transform: translateY(-50%);
				.title{
					height: 200rpx;
					text-align: center;
					line-height: 200rpx;
					font-size:32rpx;
					font-weight:bold;
					color:rgba(51,51,51,1);
				}
				.crt{
					display: flex;
					align-items: center;
					height: 100rpx;
					border-top: 1px solid #eee;
					>view{
						font-size: 36rpx;
						flex: 1;
						text-align: center;
						line-height: 100rpx;
						&:first-child{
							border-right: 1px solid #eee;
						}
						&:last-child{
							color:#2291FF;
						}
					}
				}
			}
		}
		
		
	}
</style>
